[V0_FILE]typescriptreact:file="app/page.tsx" import Navbar from "@/components/navbar" import HeroSection from "@/components/hero-section" import FeaturesSection from "@/components/features-section" import UseCasesSection from "@/components/use-cases-section" import PricingSection from "@/components/pricing-section" import TestimonialsSection from "@/components/testimonials-section" import CtaSection from "@/components/cta-section" import Footer from "@/components/footer" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" export default function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

AgentAI {/* Desktop Navigation */}

Features Use Cases Pricing Testimonials

{/* Mobile Menu Button */}

{/* Mobile Navigation */} {isMenuOpen && (

setIsMenuOpen(false)} > Features setIsMenuOpen(false)} > Use Cases setIsMenuOpen(false)} > Pricing setIsMenuOpen(false)} > Testimonials

)}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { ArrowRight, Bot, Sparkles, Zap } from "lucide-react" import { motion } from "framer-motion" export default function HeroSection() { const [isHovered, setIsHovered] = useState(false) return (

Next-Gen AI Agents

AI Agents That Work For You

Automate complex workflows, make decisions, and solve problems with our agentic AI platform. Your digital workforce is here.

No credit card required • Free tier available

Schedule meetings with clients next week

I'll help you schedule those meetings.

✓ Checking your calendar availability

✓ Drafting emails to 5 clients

✓ Suggesting optimal meeting times

✓ Creating calendar events

Perfect, thank you!

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" "use client" import { motion } from "framer-motion" import { Brain, Workflow, Layers, Shield, Zap, Code } from "lucide-react" export default function FeaturesSection() { const features = [ { icon: , title: "Autonomous Decision Making", description: "Our agents make intelligent decisions based on your goals and constraints without constant supervision.", }, { icon: , title: "Complex Workflow Automation", description: "Automate multi-step processes that require judgment, adaptation, and coordination between systems.", }, { icon: , title: "Multi-Agent Collaboration", description: "Deploy teams of specialized agents that work together to solve complex problems.", }, { icon: , title: "Secure & Compliant", description: "Enterprise-grade security with fine-grained permissions and audit logs for all agent actions.", }, { icon: , title: "Rapid Integration", description: "Connect to your existing tools and data sources in minutes with our extensive API library.", }, { icon:

,
      title: "Customizable Agents",
      description: "Build and customize agents with our intuitive interface or advanced programming options.",
    },
  ]

  return (
    
      
        
          
            Powerful Agentic AI Features
            
              Our platform provides everything you need to build, deploy, and manage intelligent AI agents that get work
              done.
            
          
        

        
          {features.map((feature, index) => (
            
              
                {feature.icon}
              
              {feature.title}
              {feature.description}
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/use-cases-section.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Building, LineChart, Users, ShoppingCart, FileText, MessageSquare } from "lucide-react"

export default function UseCasesSection() {
  const [activeTab, setActiveTab] = useState("customer-service")

  const useCases = {
    "customer-service": {
      icon: ,
      title: "Customer Service",
      description:
        "Our AI agents handle customer inquiries 24/7, resolving issues and escalating when necessary. They learn from each interaction to continuously improve service quality.",
      benefits: [
        "24/7 availability with no wait times",
        "Consistent quality across all interactions",
        "Seamless escalation to human agents when needed",
        "Multilingual support without additional cost",
      ],
      image: "/placeholder.svg?height=300&width=500",
    },
    sales: {
      icon: ,
      title: "Sales Automation",
      description:
        "Agents qualify leads, follow up with prospects, and guide customers through the sales process, increasing conversion rates while reducing sales team workload.",
      benefits: [
        "Automated lead qualification and scoring",
        "Personalized follow-ups at scale",
        "Intelligent product recommendations",
        "Detailed analytics on customer interactions",
      ],
      image: "/placeholder.svg?height=300&width=500",
    },
    "data-analysis": {
      icon: ,
      title: "Data Analysis",
      description:
        "Our agents analyze large datasets, identify trends, and generate actionable insights, helping you make data-driven decisions faster than ever before.",
      benefits: [
        "Automated report generation and distribution",
        "Anomaly detection and proactive alerts",
        "Natural language queries for complex data",
        "Visualization recommendations based on data type",
      ],
      image: "/placeholder.svg?height=300&width=500",
    },
    hr: {
      icon: ,
      title: "HR & Recruitment",
      description:
        "Streamline your hiring process with agents that screen resumes, schedule interviews, and answer candidate questions, ensuring a smooth experience for all parties.",
      benefits: [
        "Unbiased initial candidate screening",
        "Automated interview scheduling",
        "Candidate FAQ handling",
        "Onboarding process automation",
      ],
      image: "/placeholder.svg?height=300&width=500",
    },
    legal: {
      icon: ,
      title: "Legal Document Review",
      description:
        "Agents review contracts and legal documents, flagging potential issues and summarizing key points, saving your legal team valuable time.",
      benefits: [
        "Rapid contract review and comparison",
        "Identification of non-standard clauses",
        "Compliance checking against regulations",
        "Plain language summaries of complex documents",
      ],
      image: "/placeholder.svg?height=300&width=500",
    },
    operations: {
      icon: ,
      title: "Operations Management",
      description:
        "Optimize your operations with agents that monitor processes, predict maintenance needs, and coordinate resources across departments.",
      benefits: [
        "Predictive maintenance scheduling",
        "Inventory optimization",
        "Supply chain disruption detection",
        "Cross-department resource coordination",
      ],
      image: "/placeholder.svg?height=300&width=500",
    },
  }

  return (
    
      
        
          
            Transform Your Business With AI Agents
            
              See how organizations across industries are using our agentic AI platform to solve real business
              challenges.
            
          
        

        
          {Object.entries(useCases).map(([key, useCase]) => (
            
          ))}
        

        
          
            
              {useCases[activeTab].title}
              {useCases[activeTab].description}

              Key Benefits:
              
                {useCases[activeTab].benefits.map((benefit, index) => (
                  
                    
                      
                    
                    {benefit}
                  
                ))}
              

              
            
            
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx"
"use client"

import { motion } from "framer-motion"
import { useState } from "react"
import { ChevronLeft, ChevronRight, Quote } from "lucide-react"

export default function TestimonialsSection() {
  const testimonials = [
    {
      quote:
        "AgentAI has transformed how we handle customer support. Our response times dropped by 80% while customer satisfaction increased by 25%.",
      author: "Sarah Johnson",
      title: "Customer Success Director",
      company: "TechCorp Inc.",
      avatar: "/placeholder.svg?height=64&width=64",
    },
    {
      quote:
        "The sales automation agents have been game-changing for our team. We've seen a 40% increase in qualified leads and our sales cycle has shortened significantly.",
      author: "Michael Chen",
      title: "VP of Sales",
      company: "GrowthWave",
      avatar: "/placeholder.svg?height=64&width=64",
    },
    {
      quote:
        "Our legal team now reviews contracts in minutes instead of hours. The accuracy and consistency of the AI agents have exceeded our expectations.",
      author: "Elena Rodriguez",
      title: "General Counsel",
      company: "LegalEdge",
      avatar: "/placeholder.svg?height=64&width=64",
    },
  ]

  const [currentIndex, setCurrentIndex] = useState(0)

  const nextTestimonial = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length)
  }

  const prevTestimonial = () => {
    setCurrentIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length)
  }

  return (
    
      
        
          
            What Our Customers Say
            
              Discover how businesses are achieving remarkable results with our agentic AI platform.
            
          
        

        
          
            
              
            
            
              "{testimonials[currentIndex].quote}"
              
                
                  
                
                
                  {testimonials[currentIndex].author}
                  {testimonials[currentIndex].title}
                  {testimonials[currentIndex].company}
                
              
            
          

          
            
            
              {testimonials.map((_, index) => (
                
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/pricing-section.tsx"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"

export default function PricingSection() {
  const [isAnnual, setIsAnnual] = useState(true)

  const plans = [
    {
      name: "Starter",
      description: "Perfect for individuals and small projects",
      monthlyPrice: 29,
      annualPrice: 290,
      features: ["2 AI agents", "100 agent runs per month", "Basic integrations", "Email support", "7-day history"],
      cta: "Start Free Trial",
      highlighted: false,
    },
    {
      name: "Professional",
      description: "Ideal for growing teams and businesses",
      monthlyPrice: 99,
      annualPrice: 990,
      features: [
        "10 AI agents",
        "1,000 agent runs per month",
        "Advanced integrations",
        "Priority support",
        "30-day history",
        "Custom agent training",
        "Team collaboration",
      ],
      cta: "Start Free Trial",
      highlighted: true,
    },
    {
      name: "Enterprise",
      description: "For organizations with advanced needs",
      monthlyPrice: null,
      annualPrice: null,
      features: [
        "Unlimited AI agents",
        "Custom agent runs",
        "All integrations",
        "Dedicated support",
        "Unlimited history",
        "Custom agent training",
        "Advanced security",
        "SLA guarantees",
        "On-premise deployment",
      ],
      cta: "Contact Sales",
      highlighted: false,
    },
  ]

  return (
    
      
        
          
            Simple, Transparent Pricing
            
              Choose the plan that's right for your business, with no hidden fees or surprises.
            

            
              Monthly
              
              
                Annual Save 20%
              
            
          
        

        
          {plans.map((plan, index) => (
            
              {plan.highlighted && (
                Most Popular
              )}
              
                {plan.name}
                {plan.description}
                
                  {plan.monthlyPrice !== null ? (
                    <>
                      
                        ${isAnnual ? plan.annualPrice / 12 : plan.monthlyPrice}
                      
                      /month
                      {isAnnual && (
                        Billed annually (${plan.annualPrice}/year)
                      )}
                    
                  ) : (
                    Custom Pricing
                  )}
                
                
              
              
                What's included:
                
                  {plan.features.map((feature, i) => (
                    
                      
                      {feature}
                    
                  ))}
                
              
            
          ))}
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/cta-section.tsx"
"use client"

import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export default function CtaSection() {
  return (
    
      
        
          
            {/* Background Pattern */}
            
              
              
            

            
              
                
                  Ready to transform your business with AI agents?
                
                
                  Start your free 14-day trial today. No credit card required.
                
              
              
                
                
              
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx"
import Link from "next/link"
import { Github, Twitter, Linkedin, Youtube } from "lucide-react"

export default function Footer() {
  const currentYear = new Date().getFullYear()

  return (
    
      
        
          
            
              
                A
              
              AgentAI
            
            
              Building the future of work with autonomous AI agents that help businesses automate complex tasks and make
              better decisions.
            
            
              
                
                Twitter
              
              
                
                LinkedIn
              
              
                
                GitHub
              
              
                
                YouTube
              
            
          

          
            Product
            
              
                
                  Features
                
              
              
                
                  Pricing
                
              
              
                
                  API
                
              
              
                
                  Integrations
                
              
              
                
                  Documentation
                
              
            
          

          
            Company
            
              
                
                  About
                
              
              
                
                  Blog
                
              
              
                
                  Careers
                
              
              
                
                  Press
                
              
              
                
                  Contact
                
              
            
          

          
            Resources
            
              
                
                  Community
                
              
              
                
                  Help Center
                
              
              
                
                  Partners
                
              
              
                
                  Status
                
              
              
                
                  Security
                
              
            
          
        

        
          © {currentYear} AgentAI. All rights reserved.
          
            
              Terms
            
            
              Privacy
            
            
              Cookies
            
          
        
      
    
  )
}
[V0_FILE]typescriptreact:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.5% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

About

Tags

Share

About

Tags

Share

More from codescandy

More Templates Like This

About

Tags

Share

About

Tags

Share

More from codescandy

More Templates Like This